<template>
  <div>
    <div class="title">疫情期间出行防疫政策</div>
    <!-- van-field
            v-model (value)	当前输入的值	number | string	-
            label	输入框左侧文本
            is-link	是否展示右侧箭头并开启点击反馈
            readonly	是否只读

        van-cascader
            title	顶部标题
            options	可选项数据源   数据格式=[]
            active-color	选中状态的高亮颜色
            事件：
            finish	全部选项选择完成后触发 { value, selectedOptions, tabIndex }
            close	点击关闭图标时触发
     -->
    <van-field v-model="goCity" is-link readonly label="出发城市" placeholder="请选择所在地区" @click="show = true" />
    <van-popup v-model="show" round position="bottom">
      <van-cascader v-model="cascaderValue" title="请选择出发城市" :options="options" @close="show = false" @finish="onFinish" />
    </van-popup>

    <van-field v-model="toCity" is-link readonly label="到达城市" placeholder="请选择所在地区" @click="show2 = true" />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader v-model="cascaderValue2" title="请选择出发城市" :options="options" @close="show2 = false" @finish="toFinish" />
    </van-popup>

    <!-- 查询按钮 -->
    <div class="search">
      <van-button type="primary" size="large" @click="search">查询疫情防疫</van-button>
    </div>

    <!-- 政策查询结果 -->
    <div class="content">
      <div class="container1">
        <van-icon name="logistics" color="blue" />出发城市:<div class="container1-children">{{from_info}}</div>
      </div>

      <div class="container2">
        <van-icon name="star" color="red" />到达城市：<div class="container2-children">{{to_info}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 弹框状态  false隐藏 true显示
      show2: false, // 弹框状态  false隐藏 true显示
      goCity: '', // 出发的值
      toCity: '', // 到达的值
      from: '', // 出发的id值
      to: '',
      cascaderValue: '',
      cascaderValue2: '',
      from_info: '',
      to_info: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }]
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }]
        }
      ]
    }
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions, tabIndex }) {
      this.from = value
      this.show = false
      this.goCity = selectedOptions.map(option => option.text).join('/')
    },
    toFinish({ value, selectedOptions, tabIndex }) {
      this.to = value
      this.show2 = false
      this.toCity = selectedOptions.map(option => option.text).join('/')
    },
    search() {
      this.api.getTravelQuery({ from: this.from, to: this.to }).then(res => {
        console.log(res.data)
        if (res.data.data.to_info.high_in_desc === '') {
          this.to_info = res.data.data.to_info.low_in_desc
        } else {
          this.to_info = res.data.data.to_info.high_in_desc
        }
        this.from_info = res.data.data.from_info.out_desc
        // this.to_info = res.data.data.to_info.low_in_desc
        console.log(this.from_info, this.to_info)
      })
    }
  },
  created() {
    this.api.getTravel().then(res => {
      console.log('出行城市id', res.data.data)
      const result = res.data.data
      // 处理的数据结构[{text:'',value:'',children:[{}]},{}]
      const arr = []
      result.forEach(item => {
        const obj = {}
        obj.text = item.province
        obj.value = item.province_id
        obj.children = []
        item.cities.forEach(ele => {
          const child = {}
          child.text = ele.city
          child.value = ele.city_id
          obj.children.push(child)
        })
        arr.push(obj)
      })
      this.options = arr
    })
  }
}
</script>

<style lang="less" scoped>
.title {
  padding: 0.2rem;
  text-align: center;
  font-size: 0.4rem;
  padding-bottom: 0.5rem;
  font-family: 'Lucida Calligraphy', cursive, serif, sans-serif;
}
.search {
  margin: 0.2rem;
}
.content {
  .container1 {
    .container1-children {
      padding: 0.4rem;
      margin-left: 1rem;
      margin-right: 0.2rem;
      border: 0.001rem solid gray;
      border-radius: 0.5rem;
      background-color: rgb(105, 214, 163);
    }
  }
  .container2 {
    margin-bottom: 2rem;
    .container2-children {
      padding: 0.4rem;
      margin-left: 1rem;
      margin-right: 0.2rem;
      border: 0.001rem solid gray;
      border-radius: 0.5rem;
      background-color: rgb(105, 214, 172);
    }
  }
}
</style>
